<template>

    <el-card class="form-card">
        <div slot="header">
            <!--<el-page-header @back="goBack" content="详情页面">-->
            <!--</el-page-header>-->
            <!-- 导航 -->
            <el-breadcrumb separator-class="el-icon-arrow-right">
                <el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item>
                <el-breadcrumb-item :to="{ path: '/queryRoleByCondition' }">角色管理</el-breadcrumb-item>
                <el-breadcrumb-item>新增角色</el-breadcrumb-item>
            </el-breadcrumb>
            <!-- 导航 -->
        </div>
        <!-- 新增表单 -->
        <el-form ref="form" :model="form" label-width="120px">
            <el-form-item label="角色名称：">
                <el-input v-model="form.roleName"></el-input>
            </el-form-item>
            <el-form-item label="角色代号：">
                <el-input v-model="form.roleNo"></el-input>
            </el-form-item>
            <el-form-item label="排序：">
                <el-input type="number" v-model="form.roleSort"></el-input>
            </el-form-item>
            <el-form-item label="角色描述：">
                <el-input type="textarea" v-model="form.roleDesc" :autosize="{ minRows: 5, maxRows: 7}"></el-input>
            </el-form-item>
            <el-form-item>
                <el-button type="primary" @click="onSubmit">新增</el-button>
                <el-button @click="onBack">返回</el-button>
            </el-form-item>
        </el-form>
        <!-- 新增表单 -->
    </el-card>


</template>

<script>
    import {addRole} from "../../../api/role"
    import {queryAllPermissionForRank} from "../../../api/permission"

    export default {
        name: "AddRole",
        data() {
            return {
                form: {
                    roleName: '',
                    roleNo: '',
                    roleDesc: '',
                    roleSort: 10
                }
            }
        },
        created() {
            this.loadAllPermissions()
        },
        methods: {
            loadAllPermissions() {
                queryAllPermissionForRank().then(res => {
                    this.permissions = res.data.data
                })
            },
            onSubmit() {
                addRole({
                    'roleName': this.form.roleName,
                    'roleNo': this.form.roleNo,
                    'roleDesc': this.form.roleDesc,
                    'roleSort': this.form.roleSort
                }).then(res => {
                    if(res.data.code == 200){
                        this.$message({
                            message: '新增角色成功',
                            type: 'success'
                        })
                        this.$router.push('/queryRoleByCondition')
                    }else{
                        this.$message.error(res.data.msg)
                    }
                })
            },
            onBack() {
                this.$router.push('/queryRoleByCondition')
            }
        }
    }
</script>

<style scoped>

</style>
